React Flightのフォーマット
from React Flight
#WIP
こんな感じのが1行ずつresponseされる
code:_
{"some":{"json":"$1"},data:"$1","$2"}
J1:{"more":"data"}
E2:{"message":"An error happened","stack": "\n..."}
1行目のデータが来たとき、$1とか$2の内容が不明なので、suspendする
2行目のデータのJ1を見たら$1に入る値がわかるので$1部分のsuspendを解除する
3行目ではEで、これはエラーを表す
なので、$2のpromiseを解決し、errorをthrowする
昔のコードの中のコメントに説明があった
「Flighはprotocol」と明記されているmrsekut.icon
https://github.com/sebmarkbage/react/blob/dee03049f5/packages/react-server/src/ReactFlightServer.js
code:(dee0304)packages/react-server/src/ReactFlightServer.js
/*
FLIGHT PROTOCOL GRAMMAR
Response
- JSONData RowSequence
- JSONData
RowSequence
- Row RowSequence
- Row
Row
- "J" RowID JSONData
- "H" RowID HTMLData
- "B" RowID BlobData
- "U" RowID URLData
- "E" RowID ErrorData
RowID
- HexDigits ":"
HexDigits
- HexDigit HexDigits
- HexDigit
HexDigit
- 0-F
URLData
- (UTF8 encoded URL) "\n"
ErrorData
- (UTF8 encoded JSON: {message: "...", stack: "..."}) "\n"
JSONData
- (UTF8 encoded JSON) "\n"
- String values that begin with $ are escaped with a "$" prefix.
- References to other rows are encoding as JSONReference strings.
JSONReference
- "$" HexDigits
HTMLData
- ByteSize (UTF8 encoded HTML)
BlobData
- ByteSize (Binary Data)
ByteSize
- (unsigned 32-bit integer)
*/
https://zenn.dev/laiso/scraps/9f5ae498c656c6
React Flight Serverのバイディングとしてreact-server-dom-webpackがある
RSCでは特定のエンドポイントからHTTPでJSONを受け取りClientが画面に描画する
出力
code:js
M1:{"id":"./src/ClientComponent.client.js","chunks":"client1","name":""}
J0:["$","@1",null,{"children":"$","span",null,{"children":"Hello from server land"}}]
M
client componentのmodule参照
J
実際のReact要素ツリー
$L
穴？
React Server Componentsの仕組み：詳細ガイド | POSTD
解説されている
https://eh-career.com/engineerhub/entry/2022/01/13/090000#:~:text=Server%20Componentsは下記のような形式でサーバーからフロントエンドに送信されます%E3%80%82下記は%20React%20Server%20Components%20Demo%20のアプリケーションより取得したものですが%E3%80%81このデータを元にフロントエンドでReactElementとして復元されて処理されます%E3%80%82
RSCはstreamでかえす
木構造で上から徐々に返したい
$L8で、8: のやつが入るみたいな？
右クリックでcopy as curl
revalidateした時にpostしてる？
header内のNext-Actionにidが入ってる